<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>java_doc_search</title>
</head>
<body>
   

    <!-- 通过.container 来表示整个页面元素的容器 -->
    <div class="container">
         <!-- 1.搜索框 + 搜索按钮 -->
        <div class="header">
            <input type="text">
            <button id="search-btn">搜索</button>
        </div>
        <!-- 2.显示搜索结果 -->
        <div class="result">
            <!-- 包含很多条记录 -->
            <!-- 每条.item就表示一条记录 -->
            <!-- <div class="item">
                <a href="#">我是标题</a>
                <div class="desc">我是描述 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore adipisci qui ratione minus aliquid aperiam tenetur quidem atque sunt perferendis architecto, a quia veniam facilis cupiditate porro. Totam, perferendis provident.</div>
                <div class="url">我是url</div>
            </div>
            <div class="item">
                <a href="#">我是标题</a>
                <div class="desc">我是描述 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore adipisci qui ratione minus aliquid aperiam tenetur quidem atque sunt perferendis architecto, a quia veniam facilis cupiditate porro. Totam, perferendis provident.</div>
                <div class="url">我是url</div>
            </div>
            <div class="item">
                <a href="#">我是标题</a>
                <div class="desc">我是描述 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore adipisci qui ratione minus aliquid aperiam tenetur quidem atque sunt perferendis architecto, a quia veniam facilis cupiditate porro. Totam, perferendis provident.</div>
                <div class="url">我是url</div>
            </div>
            <div class="item">
                <a href="#">我是标题</a>
                <div class="desc">我是描述 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Inventore adipisci qui ratione minus aliquid aperiam tenetur quidem atque sunt perferendis architecto, a quia veniam facilis cupiditate porro. Totam, perferendis provident.</div>
                <div class="url">我是url</div>
            </div> -->
            <!-- 接下来通过访问服务器的方式搜索结果，并且由js动态调整 -->
            
        </div>
    </div>

    <style>
        /* 这部分代码用来写样式 */
        /* 先去掉浏览器的默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 给整体页面指定一个高度（和浏览器窗口一样高） */
        html,body {
            height: 100%;
            /* 设置背景图 */
            background-image: url(image/background.jpg);
            /* 设置不平铺 */
            background-repeat: no-repeat;
            /* 设置背景图位置 */
            background-position: center center;
            /* 设置背景图大小 */
            background-size: cover;
        }

        /* 针对.container也设置样式，实现版心效果 */
        .container {
            /* 此处的宽度也可以设置成百分数的形式，当前使用一个固定宽度 */
            width: 1200px;
            height: 100%;
            /* 设置水平居中 */
            margin: 0 auto;
            /* 设置背景色，让版心和背景图能够区分开 */
            background-color: rgba(255, 255, 255, 0.8);
            /* 设置圆角矩形 */
            border-radius: 10px;
            /* 设置内边距，避免文字内容紧贴着边距 */
            padding: 20px;

            /* 超出元素的部分会自动加一个滚动条 */
            overflow: auto;
        }

        .header {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header>input {
            width: 1000px;
            height: 50px;
            font-size: 22px;
            line-height: 50px;
            padding-left: 10px;
            border-radius: 10px;
        }

        .header>button {
            width: 100px;
            height: 50px;
            background-color: rgb(42, 107, 205);
            color: #fff;
            font-size: 22px;
            line-height: 50px;
            border-radius: 10px;
            border: none;
        }

        .header>button:active {
            background: gray;
        }

        .item {
            width: 100%;
            margin-top: 20px;
        }

        .item a {
            display: block;
            height: 40px;

            font-size: 22px;
            line-height: 40px;
            font-weight: 700;

            color: rgb(100, 107, 205);
        }

        .item .desc {
            font-size: 18px;

        }

        .item .url {
            font-size: 18px;
            color: rgb(0, 128, 0);
        }

        .item .desc i {
            color: red;
            font-style: normal;
        }

        .result .count {
            color: gray;
            margin-top: 10px;
        }
    </style>

    <script src="js/jquery.min.js"></script>
    <script>
        let button = document.querySelector("#search-btn");
        button.onclick = function() {
            //先获取输入框的内容
            let input = document.querySelector(".header input");
            let query = input.value;
            console.log("query:"+query);
            jQuery.ajax({
                type:"GET",
                url: "searcher?query=" + query,
                success:function(body,status) {
                    if(body.code==200) {
                        //body参数表示拿到结果数据
                        //status参数表示http状态码
                        buildResult(body.data);
                    }
                }
            });
        }

        //通过这个方法把响应数据进行构造页面
        function buildResult(data) {
            let result = document.querySelector(".result");
            result.innerHTML = '';
            let countDiv = document.createElement('div');
            countDiv.innerHTML = '当前找到' + data.length + '个结果!';
            countDiv.className = 'count';
            result.appendChild(countDiv);
            for(let item of data) {
                let itemDiv = document.createElement('div');
                itemDiv.className = 'item';
                let title = document.createElement('a');
                title.href = item.url;
                title.innerHTML = item.title;
                title.target = '_blank';
                itemDiv.append(title);
                let desc = document.createElement('div');
                desc.className = 'desc';
                desc.innerHTML = item.desc;
                itemDiv.appendChild(desc);
                let url = document.createElement('div');
                url.className = 'url';
                url.innerHTML = item.url;
                itemDiv.appendChild(url);
                result.appendChild(itemDiv);
            }
        }
    </script>
</body>
</html>